import React from 'react'
import { Button, Form, Input, Space } from 'antd'
import { inject, observer } from 'mobx-react'
import {
  EyeInvisibleOutlined,
  EyeTwoTone,
  UserOutlined,
  LockOutlined,
} from '@ant-design/icons'
import { createHashHistory } from 'history'
import HomeStore from '../../stores/HomeStory'

import './login.less'
import { request } from '../../api/request'

interface LoginInterface {
  HomeStore: HomeStore
}

const Login: React.FC<LoginInterface> = (props: LoginInterface) => {
  const [form] = Form.useForm()

  const reset = () => {
    form.resetFields()
  }

  const submit = (val: any) => {
    console.log(val)
    request
      .post({
        url: '/user/login',
        data: val,
      })
      .then((res) => {
        console.log(res)
        if (res.data !== null) {
          localStorage.setItem('token', res.data.auth)
          localStorage.setItem('username', res.data.username)
          localStorage.setItem('avatar', res.data.avatar)
          createHashHistory().push('/dashboard')
        }
      })
  }
  return (
    <div className='max-box'>
      <div className='login-box login'>
        <h1>登陆</h1>
        <Form form={form} onFinish={submit}>
          <input type='text' className='display-none' />
          <Form.Item name='username'>
            <Input
              prefix={<UserOutlined />}
              size='large'
              autoComplete='new-password'
              placeholder='请输入您的用户名...'
            />
          </Form.Item>
          <Form.Item name='password'>
            <Input.Password
              iconRender={(visible: any) =>
                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
              }
              prefix={<LockOutlined />}
              size='large'
              autoComplete='new-password'
              placeholder='请输入您的密码...'
            />
          </Form.Item>
          <Space size={8}>
            <Form.Item>
              <Button type='dashed' onClick={reset}>
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type='primary' htmlType='submit'>
                登陆
              </Button>
            </Form.Item>
          </Space>
        </Form>
        <p className='animated bounce'>
          你还没有账号？<a href='/#/reg'>去注册</a>
        </p>
      </div>
    </div>
  )
}

export default inject('HomeStore')(observer(Login))
